<template>
    <div class="studentList">
   
    

        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="100"
         layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </div>
</template>

<script>
import { students,studentDel } from '@/api/api';
  export default {
    data() {
      return {
        tableData: [],
        currentPage:1,//当前页数
        pageSize:10, //每页显示条数
        total:0, //总条数
        formInline:{
            name:''
        }
      }
    },
    computed:{
        compData(){
            return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
    },
    created(){
        this.getData()
    },
    methods:{
        //查询方法
        find(){
            this.getData(this.formInline)//根据输入框获取筛选数据
        },
        //重置方法
        reset(){
            this.formInline={}//清空输入框
            this.getData(this.formInline)//重新获取数据
        },
        //更改页面大小
        handleSizeChange(val) {
       this.pageSize=val  //每页显示信息条数为val
       this.currentPage=1 //页码数重置为1
      },
      //更改页码数
      handleCurrentChange(val) {
       this.currentPage=val
      },
      //获取数据
        getData(params){
            students(params).then((res)=>{
                if(res.data.status===200){
                    this.tableData=res.data.data//表格数据
                    this.total=res.data.total//总数据条数
                    //表格数据转换，使用_text避免直接修改字段值
                    this.tableData.forEach(item=>{
                        item.sex===1?item.sex_text='男':item.sex_text='女'
                        item.state===1?
                        (item.state_text='已入学')
                        :item.state===2?
                        (item.state_text='未入学')
                        :(item.state_text='休学中')
                    })
                }

                
            })
        },
        del(row){
            studentDel(row.id).then(res=>{
                if(res.data.status===200){
                    this.$message({message:'删除数据成功',type:'success'})
                    this.getData()//删除后重新获取数据
                }
            })
        }
    }
  }
</script>

<style lang="scss">
.demo-form-inline,.el-form-item{
    text-align: left;
}
</style>